<template>
  <div class="container">
    <div class="toptitle">
      <div class="titletext">操作统计</div>
      <hr />
    </div>

    <!-- 日期选择和导出按钮 -->
    <div class="top-controls">
      <div class="date-buttons">
        <button @click="selectDate('year')">年</button>
        <button @click="selectDate('month')">月</button>
        <button @click="selectDate('day')">日</button>
      </div>
      <button class="export-btn" @click="exportToExcel">导出 Excel</button>
    </div>

    <!-- 统计表格 -->
    <el-table :data="tableData" border style="width: 100%; table-layout: auto;">
      <el-table-column prop="device" label="设备" />
      <el-table-column prop="totalCount" label="总次数" />
      <el-table-column prop="failureCount" label="失败次数" />
      <el-table-column prop="totalDuration" label="总时长" />
      <el-table-column prop="lastOperationTime" label="最后操作时间" />
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import * as XLSX from "xlsx"; 
import { ElTable, ElTableColumn } from "element-plus";

// 当前选择的日期类型
const selectedDateType = ref('year'); 
const tableData = ref([
  {
    device: "设备1",
    totalCount: 120,
    failureCount: 5,
    totalDuration: "15小时",
    lastOperationTime: "2024-12-19 14:00"
  },
  {
    device: "设备2",
    totalCount: 80,
    failureCount: 3,
    totalDuration: "10小时",
    lastOperationTime: "2024-12-18 16:00"
  },
]);

// 选择日期类型
const selectDate = (dateType) => {
  selectedDateType.value = dateType;
  console.log(`选择了 ${dateType} 统计`);
};

// 导出Excel
const exportToExcel = () => {
  const ws = XLSX.utils.json_to_sheet(tableData.value);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "统计数据");
  
  XLSX.writeFile(wb, "操作统计.xlsx");
};
</script>

<style lang="scss" scoped>
@use "@/styles/themes.scss";

.container {
  flex: 1;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 100%;
  max-width: 100%; 

  .toptitle {
    margin-bottom: 15px;

    .titletext {
      border-left: 5px solid var(--primary-color);
      padding-left: 15px;
      font-size: 20px;
      font-weight: 600;
    }

    hr {
      background-color: rgb(194, 194, 194);
      height: 1px;
      border: none;
      margin: 8px 0;
    }
  }

  /* Date selection and export buttons on the same row */
  .top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .date-buttons {
    button {
      padding: 8px 20px;
      margin-right: 15px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;

      &:hover {
        // background-color: darken(rgb(0, 0, 0), 10%);
      }
    }
  }

  .export-btn {
    padding: 8px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 160px;
    font-size: 16px;

    &:hover {
      // background-color: darken(rgb(0, 0, 0), 10%);
    }
  }

  /* Table styles */
  .el-table {
    width: 100%;
    table-layout: auto; 
    box-sizing: border-box; 
  }

  .el-table th, .el-table td {
    padding: 12px 15px; 
    text-align: center;
  }

  .el-table .el-table__row:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .el-table th {
    background-color: #f5f5f5; 
    font-weight: bold;
  }

  /* Add subtle borders */
  .el-table th, .el-table td {
    border: 1px solid #dcdfe6;
  }

  .el-table .el-table__row:hover {
    background-color: #f2f2f2;
  }
}
</style>
